<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<div id="app">
			
			<input type="text" v-model="message" />
			
			<!-- 当前的值：{{capitalize(    splitMSG (message) )  }} -->
			使用过滤器：{{message| splitMSG | capitalize  }}

		</div>

		<script>
			
			// 全局的 过滤器
			Vue.filter('splitMSG', (message)=>{
				if(!message) return [];
				
				let arr = message.split(" ");
				return arr;
			})	
			
			Vue.filter('capitalize',function(array){
				if (!array || array.length == 0) return ''
				
				let str = '';
				array.forEach( (word ,index)=>{
					str += word.charAt(0).toUpperCase() + word.slice(1)+" "
				})
				
				return str 
			})
			
		
		
		
		
			let vm = new Vue({
				el: '#app',
				data: {
					message:''
				},
				methods:{
					
				},
				//本地过滤器
				// filters:{
				// 	splitMSG(message){
				// 		if(!message) return [];
						
				// 		let arr = message.split(" ");
				// 		return arr;
				// 	},
				// 	capitalize(array){
				// 		if (!array || array.length == 0) return ''
						
				// 		let str = '';
				// 		array.forEach( (word ,index)=>{
				// 			str += word.charAt(0).toUpperCase() + word.slice(1)+" "
				// 		})
						
				// 		return str 
				// 	}
				// }
				
			});
		</script>

	</body>
</html>
